<script setup>
import { onMounted, inject, reactive, nextTick, defineProps, watch } from 'vue'

const props = defineProps(['param'])

const $axios = inject('$axios')

watch(
  () => props.param,
  () => {
    autoScroll()
  }
)

// const tableData = reactive([])

// onMounted(() => {
//   getBackHomeCount()
// })

function autoScroll() {
  const el = document.getElementById('table_query_quarantine')
  const elHeight = el.offsetHeight
  const sHeight = el.scrollHeight
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++
    } else {
      el.scrollTop = 0
    }
  }, 50)
}

// function getBackHomeCount() {
//   $axios
//     .get('person_back_home/backHomeSum')
//     .then(res => {
//       res.data.data.forEach(item => {
//         tableData.push({
//           number: item.orders,
//           palce: item.village,
//           added: item.newToday,
//           count: item.total,
//           reded: item.reds,
//           yellowed: item.yellows,
//           quarantine: item.focus,
//           home: item.home,
//         })
//       })
//     })
//     .then(nextTick)
//     .then(() => {
//       autoScroll()
//     })
// }
</script>

<template>
  <div class="quarantineBox">
    <div class="line">
      <div class="th" style="flex: 0.8">隔离人员</div>
      <div class="th" style="flex: 1">隔离人员证件号码</div>
      <div class="th" style="flex: 1">隔离方式</div>
      <div class="th" style="flex: 1">开始隔离时间</div>
      <div class="th" style="flex: 1">解除隔离时间</div>
    </div>
    <div class="table scroll" id="table_query_quarantine">
      <div class="tr" v-for="(item, index) in props.param" :key="index" ref="tableRef">
        <div style="flex: 0.8">{{ item.name }}</div>
        <div style="flex: 1">{{ item.idCard }}</div>
        <div style="flex: 1">{{ item.isolateType }}</div>
        <div style="flex: 1">{{ item.startTime }}</div>
        <div style="flex: 1">{{ item.endTime }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.quarantineBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .line {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 40px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;

    .th {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .table {
    flex: 1;
    width: 100%;
    overflow: hidden auto;
    margin-top: 16px;

    .tr {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 56px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;

      &:nth-child(odd) {
        background: rgba(19, 181, 177, 0.4);
      }
    }
  }
}
</style>
